<template>
	<view class="authentication">
		<view>
			<u-toast ref="uToast" />
		</view>
		<view class="form">
			<view class="tip">
				实名认证后无法更改，请确保填写正确，提交后不可修改
			</view>

			<view class="userinfo">
				<label>
					<view class="title">
						真实姓名
					</view>
					<view class="field">
						<u-input v-model="name" type="text" placeholder-style="font-size: 24rpx; color: #C0C4CC;"
							placeholder="请输入您的真实姓名" :clearable="false" input-align="right"></u-input>

					</view>
				</label>
				<label>
					<view class="title">
						身份证号
					</view>
					<view class="field">
						<u-input v-model="idCard" type="text" maxlength="18"
							placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="请输入您的身份证号"
							:clearable="false" input-align="right"></u-input>

					</view>
				</label>
				<label>
					<view class="title">
						银行名称
					</view>
					<view class="field">
						<u-input v-model="bankName" type="text" placeholder-style="font-size: 24rpx; color: #C0C4CC;"
							placeholder="请输入银行名称" :clearable="false" input-align="right"></u-input>

					</view>
				</label>
				<label>
					<view class="title">
						银行卡号
					</view>
					<view class="field">
						<u-input v-model="banKCard" maxlength="19" type="text"
							placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="请输入银行卡号"
							:clearable="false" input-align="right"></u-input>

					</view>
				</label>
				<label>
					<view class="title">
						银行预留手机号
					</view>
					<view class="field">
						<u-input v-model="mobile" type="text" maxlength="11"
							placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="请输入银行预留手机号"
							:clearable="false" input-align="right"></u-input>
					</view>
				</label>
			</view>

			<view class="btn" @click="submit">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	import request from "@/util/request.js"
	import {
		phoneValidator
	} from '@/util/validator.js'
	export default {
		data() {
			return {
				name: '',
				idCard: '',
				bankName: '',
				banKCard: '',
				mobile: ''
			}
		},
		methods: {
			show(title, type, callback) {
				this.$refs.uToast.show({
					title,
					type: type ? type : "default",
					duration: 2000,
					position: "top",
					callback: callback ? callback : () => {}
				})
			},
			submit() {
				// 真实姓名不能为空
				if (this.name === "") {
					return this.show("真实姓名不能为空~")
				}
				if (this.idCard === "") {
					return this.show("身份证号不能为空~")
				}
				if (this.bankName === "") {
					return this.show("银行名称不能为空~")
				}
				if (this.banKCard === "") {
					return this.show("银行卡号不能为空~")
				}
				const idCardRe = /^\d\d{16}[a-zA-Z0-9]$/
				if (this.idCard.length !== 18 || !idCardRe.test(this.idCard)) {
					return this.show('身份证号码错误', 'error')
				}
				if (this.banKCard.length !== 19 || !/^\d\d{18}$/.test(this.banKCard)) {
					return this.show('银行卡卡号错误', 'error')
				}
				if (this.mobile === "") {
					return this.show("银行预留手机号不能为空~")
				}

				if (!phoneValidator(this.mobile, this.show)) return
				request.globalRequest({
					url: "/api/member/user/id_name_update",
					method: "post",
					data: {
						id_name: this.name,
						id_code: this.idCard,
						bank: this.bankName,
						bank_code: this.banKCard,
						bank_phone: this.mobile
					}

				}).then(res => {
					if (res.status == '0') {
						this.show("认证成功", "success", () => {
							uni.switchTab({
								url: "/pages/user/user"
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authentication {
		padding: 0 20rpx;

		.form {
			padding: 30rpx 20rpx;
			background-color: #fff;

			.tip {
				font-weight: 600;
				color: #FF0000;
				font-size: 24rpx;
				text-align: center;
			}
		}

		.userinfo {
			label {
				display: flex;
				border-bottom: 1px solid #f1f1f1;
				justify-content: space-between;
				margin-top: 20rpx;

				.title {
					font-size: 24rpx;
					color: #666666;
					padding: 20rpx;
					margin-right: 30rpx;
				}

				.field {
					flex: 1;

				}
			}


		}

		.btn {
			margin-top: 30rpx;
			text-align: center;
			background-color: #E64340;
			border-radius: 16rpx;
			color: #fff;
			font-size: 28rpx;
			padding: 14rpx 0;
		}




	}
</style>
